<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>登录页面</title>
		<style>
			/* 重置所有元素的默认样式，确保页面在不同浏览器中显示一致 */
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			/* 设置页面基本样式，确保页面占满整个视口 */
			body,
			html {
				height: 100%;
				width: 100%;
				overflow: hidden;
			}

			/* 主容器样式 - 使用渐变背景，从红色到浅蓝色 */
			.bigBox {
				height: 100vh;
				width: 100vw;
				display: flex;
				background: linear-gradient(
					to right,
					rgb(230, 21, 52),
					rgb(191, 227, 241)
				);
			}

			/* 登录框容器样式 - 居中显示，带有阴影和圆角 */
			.box {
				flex: 1;
				max-width: 1200px;
				height: 600px;
				margin: auto;
				display: flex;
				position: relative;
				border-radius: 8px;
				border: 1px solid rgba(255, 255, 255, 0.6);
				box-shadow: 2px 1px 19px rgba(0, 0, 0, 0.1);
				z-index: 2;
			}

			/* 左侧欢迎区域样式 - 红色背景，可滑动 */
			.pre-box {
				width: 50%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 99;
				background-color: #ac0808;
				border-radius: 4px;
				box-shadow: 2px 1px 19px rgba(0, 0, 0, 0.1);
				transition: 0.5s ease-in-out;
				text-align: center;
			}

			/* 欢迎区域标题样式 - 白色文字，带有阴影效果 */
			.pre-box h1 {
				margin-top: 150px;
				color: white;
				letter-spacing: 5px;
				text-shadow: 4px 4px 3px rgba(0, 0, 0, 0.1);
			}

			/* 欢迎区域文字样式 */
			.pre-box p {
				margin: 20px 0;
				font-weight: bold;
				color: white;
			}

			/* 头像容器样式 - 圆形显示 */
			.img-box {
				width: 200px;
				height: 200px;
				margin: 20px auto;
				border-radius: 50%;
				overflow: hidden;
				box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.1);
			}

			/* 头像图片样式 - 自适应容器大小 */
			.img-box img {
				width: 100%;
			}

			/* 登录和注册表单容器样式 - 弹性布局 */
			.login-form,
			.register-form {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding: 30px;
			}

			/* 标题容器样式 - 居中显示 */
			.title-box {
				text-align: center;
				margin-bottom: 20px;
			}

			/* 标题文字样式 */
			.title-box h1 {
				color: white;
				letter-spacing: 5px;
			}

			/* 输入框和按钮容器样式 - 垂直排列 */
			.input-box,
			.btn-box {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			/* 输入框样式 - 半透明背景，圆角设计 */
			input {
				width: 60%;
				height: 40px;
				margin-bottom: 20px;
				padding-left: 10px;
				border: 1px solid #fff;
				border-radius: 120px;
				background-color: rgba(255, 255, 255, 0.3);
				backdrop-filter: blur(10px);
			}

			/* 按钮样式 - 蓝色背景，白色文字 */
			button {
				width: 100px;
				height: 30px;
				margin: 10px;
				background-color: #69b3f0;
				color: white;
				border: none;
				border-radius: 4px;
			}

			/* 切换链接样式 - 白色文字，鼠标悬停效果 */
			.btn-box p {
				color: white;
				cursor: pointer;
			}

			/* 切换链接悬停效果 - 底部边框 */
			.btn-box p:hover {
				border-bottom: 1px solid white;
			}

			/* 错误信息样式 - 红色背景，突出显示 */
			.error-message {
				color: #ff0000;
				background-color: #ffe6e6;
				padding: 10px;
				border-radius: 4px;
				margin-bottom: 15px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<!-- 主容器 -->
		<div class="bigBox">
			<div class="box">
				<!-- 左侧欢迎区域 -->
				<div class="pre-box" id="slideBox">
					<h1>WELCOME</h1>
					<p>JOIN US!</p>
					<div class="img-box">
						<img src="img/waoku.jpg" alt="图像加载失败" />
					</div>
				</div>

				<!-- 注册表单 -->
				<div class="register-form">
					<div class="title-box"><h1>注册</h1></div>
					<div class="input-box">
						<input type="text" placeholder="用户名" />
						<input type="password" placeholder="密码" />
						<input type="password" placeholder="确认密码" />
					</div>
					<div class="btn-box">
						<button>注册</button>
						<p onclick="switchBox()">已有账号？去登录</p>
					</div>
				</div>

				<!-- 登录表单 -->
				<div class="login-form">
					<div class="title-box"><h1>登录</h1></div>
					<% // 获取并显示错误信息（如果有） String error = (String)
					request.getAttribute("error"); if (error != null) { %>
					<div class="error-message"><%= error %></div>
					<% } %>
					<!-- 登录表单，提交到LoginServlet处理 -->
					<form action="LoginServlet" method="post">
						<div class="input-box">
							<input
								type="text"
								name="username"
								placeholder="用户名"
								required
							/>
							<input
								type="password"
								name="password"
								placeholder="密码"
								required
							/>
						</div>
						<div class="btn-box">
							<button type="submit">登录</button>
							<p onclick="switchBox()">没有账号？去注册</p>
						</div>
					</form>
				</div>
			</div>
		</div>

		<script>
			// 切换登录和注册表单的函数
			function switchBox() {
				const box = document.getElementById("slideBox");
				if (box.style.transform === "translateX(100%)") {
					box.style.transform = "translateX(0%)";
				} else {
					box.style.transform = "translateX(100%)";
				}
			}
		</script>
	</body>
</html>
